<template>
  <div id="tab-bar">
    <router-link to="/movies">
      <i class="iconfont icon-dianying"></i>
      <span>电影</span>
    </router-link>
    <router-link to="/cinema">
      <i class="iconfont icon-huabankaobei"></i>
      <span>影院</span>
    </router-link>
    <router-link to="/news">
      <i class="iconfont icon-zixun"></i>
      <span>资讯</span>
    </router-link>
    <router-link to="/personal">
      <i class="iconfont icon-xiaolian"></i>
      <span>我的</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "MainTabBar",
  components: {},
};
</script>

<style lang="less" scoped>
#tab-bar {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background-color: #fff;
  a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 49px;
    font-size: 14px;
    .iconfont {
      font-size: 22px;
      margin-bottom: -5px;
    }
  }
  .router-link-exact-active {
    color: red;
  }
}
</style>